import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, SafeAreaView, Image, Alert, Linking } from 'react-native';

const PaymentScreen = ({ navigation }) => {
  const [selectedPaymentMethod, setSelectedPaymentMethod] = React.useState('alipay');
  const amount = 99
  const paymentMethods = [
    { id: 'alipay', name: '支付宝支付', icon: '💰' },
    { id: 'wechat', name: '微信支付', icon: '💳' },
    { id: 'unionpay', name: '银联支付', icon: '💵' },
  ];

  const handlePayment = async () => {
    // 这里处理支付逻辑
    try {
      const response = await fetch('http://192.168.78.1:3000/pay1/alipay', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ amount: parseFloat(amount) }),
      });
      const result = await response.json();
      console.log('支付返回：', result);
      if (result.code === 200 && result.url) {
        Linking.openURL(result.url);
      } else {
        Alert.alert('错误', result.message || '支付请求失败');
      }
    } catch (error) {
      console.error('支付请求失败:', error);
      Alert.alert('错误', '支付请求失败');
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
          <Text style={styles.backButtonText}>←</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>确认支付</Text>
      </View>

      {/* 支付金额 */}
      <View style={styles.amountContainer}>
        <Text style={styles.amountLabel}>支付金额</Text>
        <Text style={styles.amount}>¥ 99.00</Text>
      </View>

      {/* 支付方式列表 */}
      <ScrollView style={styles.paymentList}>
        {paymentMethods.map((method) => (
          <TouchableOpacity
            key={method.id}
            style={styles.paymentMethod}
            onPress={() => setSelectedPaymentMethod(method.id)}
          >
            <View style={styles.paymentMethodLeft}>
              <Text style={styles.paymentIcon}>{method.icon}</Text>
              <Text style={styles.paymentName}>{method.name}</Text>
            </View>
            <View style={styles.paymentMethodRight}>
              {selectedPaymentMethod === method.id && (
                <View style={styles.selectedIndicator} />
              )}
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 底部支付按钮 */}
      <View style={styles.footer}>
        <TouchableOpacity style={styles.payButton} onPress={handlePayment}>
          <Text style={styles.payButtonText}>确认支付</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    height: 56,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  backButton: {
    padding: 8,
  },
  backButtonText: {
    fontSize: 24,
    color: '#333',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginLeft: 16,
  },
  amountContainer: {
    backgroundColor: '#fff',
    padding: 24,
    alignItems: 'center',
    marginTop: 12,
  },
  amountLabel: {
    fontSize: 16,
    color: '#666',
    marginBottom: 8,
  },
  amount: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#333',
  },
  paymentList: {
    backgroundColor: '#fff',
    marginTop: 12,
  },
  paymentMethod: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  paymentMethodLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paymentIcon: {
    fontSize: 24,
    marginRight: 12,
  },
  paymentName: {
    fontSize: 16,
    color: '#333',
  },
  paymentMethodRight: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  selectedIndicator: {
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: '#d0021b',
  },
  footer: {
    padding: 16,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  payButton: {
    backgroundColor: '#d0021b',
    height: 48,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  payButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default PaymentScreen; 